<template>
  <div class="todo-container">
    <!-- 顶部区域 -->
    <div class="header">
      <div class="date-section">
        <h1>今天也要努力学习！</h1>
      </div>
      <div class="action-buttons">
        <a-button ghost type="primary" @click="showListView">
          <template #icon>
            <calendar-outlined/>
          </template>
          列表视图
        </a-button>
        <a-button ghost type="primary" @click="showCalendarView">
          <template #icon>
            <calendar-outlined/>
          </template>
          日历视图
        </a-button>
        <a-button type="primary">
          <template #icon>
            <plus-outlined/>
          </template>
          添加任务
        </a-button>
      </div>
    </div>

    <!-- 切换视图区域 -->
    <div v-if="isCalendarView">
      <div class="calendar-view">
        <div class="calendar-header">
          <span>{{ currentYear }}年</span>
          <span>{{ currentMonth }}月</span>
          <span>{{ currentDay }}日</span>
        </div>
        <div class="calendar-weekdays">
          <span>一</span>
          <span>二</span>
          <span>三</span>
          <span>四</span>
          <span>五</span>
          <span>六</span>
          <span>日</span>
        </div>
        <div class="calendar-days">
          <div v-for="(day, index) in daysInMonth" :key="index" class="calendar-day">
            <span>{{ day.date }}</span>
            <div v-if="day.tasks.length > 0" class="task-list">
              <div v-for="(task, taskIndex) in day.tasks" :key="taskIndex">
                <span>• {{ task.title }}</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 任务列表区域 -->
    <div v-else class="task-list">
      <!-- 顶部区域 -->
      <div class="task-list-header">
        <div class="date-header">
          <!-- 左侧图标和标题 -->
          <span class="date-title">
          <calendar-outlined/>
          <span>{{ currentDateFormatted }} 的任务</span>
        </span>
          <!-- 右侧输入框 -->
          <a-date-picker v-model:value="selectedDate"/>
          <!-- 右侧复选框 -->
          <a-checkbox style="margin-left: 10px;">显示整月任务</a-checkbox>
        </div>
      </div>
      <a-list :data-source="tasks" item-layout="horizontal">
        <template #renderItem="{ item }">
          <a-list-item>
            <div class="task-item">
              <!-- 图标 -->
              <span style="font-size: 18px;">⚡</span>
              <!-- 标题 -->
              <span class="task-title">{{ item.title }}</span>
              <!-- 优先级标签 -->
              <span class="priority-tag">{{ item.priority }}</span>
              <!-- 状态标签 -->
              <span class="status-tag">{{ item.status }}</span>
              <!-- 操作按钮 -->
              <div class="actions">
                <a-button
                    type="primary"
                    @click="handleComplete(item)"
                >
                  <CheckSquareOutlined/>
                  完成
                </a-button>
                <a-button
                    danger
                    type="link"
                    @click="handleDelete(item)"
                >
                  <DeleteOutlined/>
                  删除
                </a-button>
              </div>
            </div>
          </a-list-item>
        </template>
      </a-list>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {computed, ref} from 'vue';
import dayjs from 'dayjs'; // 导入 dayjs
import {CalendarOutlined, CheckSquareOutlined, DeleteOutlined, PlusOutlined} from '@ant-design/icons-vue';
// 当前日期格式化
const currentDate = new Date();
const selectedDate = ref(dayjs(currentDate)); // 默认为当前日期

// 格式化日期
const currentDateFormatted = computed(() => {
  const year = selectedDate.value.year(); // 获取年份
  const month = String(selectedDate.value.month() + 1).padStart(2, '0'); // 获取月份，并补零
  const day = String(selectedDate.value.date()).padStart(2, '0'); // 获取日期，并补零
  return `${year}年${month}月${day}日`; // 拼接成目标格式
});
// 任务数据
const tasks = ref([
  {
    id: 1,
    title: '学习Redis',
    description: 'dfgdf',
    priority: '中优先级',
    status: '待完成',
    avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
    date: '2025-04-06', // 添加任务日期
  },
]);

// 是否显示日历视图
const isCalendarView = ref(false);

// 当前年份和月份
const currentYear = ref(currentDate.getFullYear());
const currentMonth = ref(currentDate.getMonth() + 1); // 月份从0开始，需要加1
const currentDay = ref(currentDate.getDate());

// 动态生成日历表格
const daysInMonth = computed(() => {
  const monthStart = new Date(currentYear.value, currentMonth.value, 1);
  const monthEnd = new Date(currentYear.value, currentMonth.value + 1, 0);
  const days = [];
  let dayCount = 1;

  // 填充月初空位
  for (let i = 0; i < monthStart.getDay(); i++) {
    days.push({date: '', tasks: []});
  }

  // 填充当月日期
  while (new Date(currentYear.value, currentMonth.value, dayCount).getTime() <= monthEnd.getTime()) {
    const date = new Date(currentYear.value, currentMonth.value, dayCount);
    const tasksOnDate = tasks.value.filter(task => {
      return task.date === `${currentYear.value}-${String(currentMonth.value + 1).padStart(2, '0')}-${String(dayCount).padStart(2, '0')}`;
    });
    days.push({date: dayCount, tasks: tasksOnDate});
    dayCount++;
  }

  // 填充月末空位
  while (days.length % 7 !== 0) {
    days.push({date: '', tasks: []});
  }

  return days;
});

// 切换到列表视图
const showListView = () => {
  isCalendarView.value = false;
};

// 切换到日历视图
const showCalendarView = () => {
  isCalendarView.value = true;
};

// 完成任务
const handleComplete = (task: any) => {
  console.log('完成任务:', task);
};

// 删除任务
const handleDelete = (task: any) => {
  console.log('删除任务:', task);
};
</script>

<style scoped>


.header {
  border: 1px solid red;
  padding: 10px 20px 20px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.date-header {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.date-title {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
}

.date-title span:first-child {
  margin-right: 5px;
}



.todo-container {
  padding: 10px 20px 20px;
  background: #fff;

  .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border: 1px solid #ccc;
    padding: 10px 20px 20px;
    border-radius: 10px;

    .date-section {
      display: flex;
      align-items: center;
    }

    .action-buttons {
      display: flex;
      gap: 10px;
    }
  }

  .task-list {
    border: 1px solid #ccc;
    max-height: 500px;
    overflow-y: auto;

    .ant-list-item {
      display: flex;
      align-items: center;
      padding: 16px;
      border-bottom: 1px solid #e8e8e8;

      &:last-child {
        border-bottom: none;
      }
    }

    .task-item {
      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 10px;
      width: 100%; /* 确保任务项占据整个宽度 */

      .task-title {
        font-size: 16px;
        font-weight: bold;
      }

      .priority-tag {
        background-color: #ff9900;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }

      .status-tag {
        background-color: #1890ff;
        color: white;
        padding: 4px 8px;
        border-radius: 4px;
        font-size: 12px;
      }

      .actions {
        display: flex;
        gap: 10px;
        margin-left: auto; /* 将按钮靠右对齐 */
        width: fit-content; /* 确保按钮组不会占据过多空间 */
      }
    }
  }

  .calendar-view {
    border: 1px solid #ccc;
    padding: 10px;
    margin-top: 20px;

    .calendar-header {
      display: flex;
      gap: 10px;
      margin-bottom: 10px;
    }

    .calendar-weekdays {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
      margin-bottom: 10px;
    }

    .calendar-days {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 10px;
    }

    .calendar-day {
      border: 1px solid #ccc;
      padding: 10px;
      text-align: center;
      position: relative;

      &.today {
        background-color: #f0f0f0;
      }

      .task-list {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #fff;
        border: 1px solid #ccc;
        padding: 5px;
      }
    }
  }
}
</style>
